<template>
  <!-- 传参 方向、无缝滚动、自动轮播、分业器 -->
  <!-- 参数分开传，方便校验 -->
  <div class="slider-wrapper">
    <me-loading v-if="!sliders.length"></me-loading>
      <me-slider :data="sliders" :direction="direction" :loop="loop" :interval="interval" :pagination="pagination" v-else>
        <swiper-slide v-for="(item, index) in sliders" :key="index">
          <a :href="item.linkUrl" class="slider-link">
            <img :src="item.picUrl" alt="" class="slider-img">
          </a>
        </swiper-slide>
      </me-slider>
  </div>
</template>

<script>
  import MeSlider from 'base/slider';
  import {swiperSlide} from 'vue-awesome-swiper';
  import {sliderOptions} from './config';
  import {getHomeSlider} from 'api/home';
  import MeLoading from 'base/loading';

  export default {
    name: 'HomeSlider',
    components: {
      'me-slider': MeSlider,
      'swiper-slide': swiperSlide,
      MeLoading
    },
    data() {
      return {
        // 配置类的单独建立文件存放home/config.js
        // direction: 'vertical',
        // loop: false,
        // interval: 0,
        // pagination: false,
        direction: sliderOptions.direction,
        loop: sliderOptions.loop,
        interval: sliderOptions.interval,
        pagination: sliderOptions.pagination,
        sliders: []
      };
    },
    // 获取远程数据
    created() {
      // getHomeSlider();
      this.getSliders();
    },
    methods: {
      // api
      update() {
        return this.getSliders();
      },

      getSliders() {
        return getHomeSlider().then(data => {
          // console.log(data);
          this.sliders = data;
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
    .slider-wrapper {
        height: 183px;
    }
    .slider-link {
        display: block;
    }
    .slider-link,
    .slider-img {
        width: 100%;
        height: 100%;
    }
</style>
